import 'package:flutter/material.dart';

class ButtonDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    // 文字按钮
    final Widget flatButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FlatButton( // 文字按钮
          onPressed: () {}, 
          child: Text("Button"),
          splashColor: Colors.grey, // 按钮按下的效果
          textColor: Theme.of(context).accentColor, // 设置文字颜色
        ),
        FlatButton.icon( // 文字按钮
          onPressed: () {}, 
          label: Text("Add"),
          icon: Icon(Icons.add),
          splashColor: Colors.grey, // 按钮按下的效果
          textColor: Theme.of(context).accentColor, // 设置文字颜色
        ),
      ],
    );

    // 带填充效果的按钮
    final Widget raisedButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RaisedButton( // 文字按钮
          onPressed: () {}, 
          child: Text("Button"),
          splashColor: Colors.grey, // 按钮按下的效果
          color: Colors.green[100], // 控制按钮的填充颜色
          textColor: Theme.of(context).accentColor, // 设置文字颜色
        ),
        SizedBox(width: 16.0,), // 设置间隔
        RaisedButton.icon( // 文字按钮
          onPressed: () {}, 
          label: Text("Add"),
          icon: Icon(Icons.add),
          splashColor: Colors.grey, // 按钮按下的效果
          elevation: 10.0, // 控制按钮跟下一层之间的高度，高度使用阴影效果体现
          textColor: Theme.of(context).accentColor, // 设置文字颜色
        )
      ],
    );

    // 描边按钮
    final Widget outlineButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OutlineButton( // 描边按钮
          onPressed: () {}, 
          child: Text("Button"),
          splashColor: Colors.grey, // 按钮按下的效果
          color: Colors.green[100], // 控制按钮的填充颜色
          textColor: Colors.black, // 设置文字颜色
          borderSide: BorderSide( // 设置描边颜色
            color: Colors.black,
          ),
        ),
        SizedBox(width: 16.0,), // 设置间隔
        OutlineButton.icon( // 描边按钮
          onPressed: () {}, 
          label: Text("Add"),
          icon: Icon(Icons.add),
          splashColor: Colors.grey, // 按钮按下的效果
          textColor: Theme.of(context).accentColor, // 设置文字颜色
        )
      ],
    );

    // 固定宽度按钮
    final Widget fixedWidthButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container( // 设置固定宽度的按钮
          width: 160.0,
          child: OutlineButton( // 描边按钮
            onPressed: () {}, 
            child: Text("Button"),
            splashColor: Colors.grey, // 按钮按下的效果
            color: Colors.green[100], // 控制按钮的填充颜色
            textColor: Colors.black, // 设置文字颜色
            borderSide: BorderSide( // 设置描边颜色
              color: Colors.black,
            ),
          ),
        ),
      ],
    );

    final Widget expandedButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded( // 设置固定宽度的按钮
          child: OutlineButton( // 描边按钮
            onPressed: () {}, 
            child: Text("Button"),
            splashColor: Colors.grey, // 按钮按下的效果
            color: Colors.green[100], // 控制按钮的填充颜色
            textColor: Colors.black, // 设置文字颜色
            borderSide: BorderSide( // 设置描边颜色
              color: Colors.black,
            ),
          ),
        ),
        SizedBox(width: 16.0), // 设置两个按钮之间的间隔
        Expanded( // 设置固定宽度的按钮
          flex: 2, // 设置按钮占据的大小，默认为1 
          child: OutlineButton( // 描边按钮
            onPressed: () {}, 
            child: Text("Button"),
            splashColor: Colors.grey, // 按钮按下的效果
            color: Colors.green[100], // 控制按钮的填充颜色
            textColor: Colors.black, // 设置文字颜色
            borderSide: BorderSide( // 设置描边颜色
              color: Colors.black,
            ),
          ),
        ),
      ],
    );

    final Widget buttonBarDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ButtonBar( // 并排显示的按钮
          children: [
            Expanded( // 设置固定宽度的按钮
              child: OutlineButton( // 描边按钮
                onPressed: () {}, 
                child: Text("Button"),
                splashColor: Colors.grey, // 按钮按下的效果
                color: Colors.green[100], // 控制按钮的填充颜色
                textColor: Colors.black, // 设置文字颜色
                borderSide: BorderSide( // 设置描边颜色
                  color: Colors.black,
                ),
              ),
            ),
            Expanded( // 设置固定宽度的按钮
              child: OutlineButton( // 描边按钮
                onPressed: () {}, 
                child: Text("Button"),
                splashColor: Colors.grey, // 按钮按下的效果
                color: Colors.green[100], // 控制按钮的填充颜色
                textColor: Colors.black, // 设置文字颜色
                borderSide: BorderSide( // 设置描边颜色
                  color: Colors.black,
                ),
              ),
            )
          ]
        ),
      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: Text("ButtonDemo"),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            flatButtonDemo,
            raisedButtonDemo,
            outlineButtonDemo,
            fixedWidthButton,
            expandedButton,
            buttonBarDemo,
          ],
        ),
      ),
    );
  }
}